<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" type="text/css" href="/res/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/res/css/login.css" />
    <link rel="stylesheet" type="text/css" href="/res/css/form.css" />
    <style type="text/css">
        .btn {
            -moz-box-shadow: 3px 4px 0px 0px #899599;
            -webkit-box-shadow: 3px 4px 0px 0px #899599;
            box-shadow: 3px 4px 0px 0px #899599;
            background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
            background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
            background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
            background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
            background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
            background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
            background-color:#ededed;
            -moz-border-radius:15px;
            -webkit-border-radius:15px;
            border-radius:15px;
            border:1px solid #d6bcd6;
            display:inline-block;
            cursor:pointer;
            color:#3a8a9e;
            font-family:Arial;
            font-size:17px;
            padding:7px 25px;
            text-decoration:none;
            text-shadow:0px 1px 0px #e1e2ed;
        }
        .btn:hover {
            background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
            background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
            background-color:#bab1ba;
        }
        .btn:active {
            position:relative;
            top:1px;
        }

    </style>
    <!-- 引入jquery库 -->
    <script type="text/javascript" src="/res/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/res/js/jquery.md5.js"></script>
    <script type="text/javascript">
        // 提交数据给服务器
        function ajaxPostData() {
            $.ajax({
                //请求发送到的url地址
                url:'/normal/homepage',
                //数据提交方式
                type:'post',
                //文档类型
                contentType: 'application/json; charset=utf-8',
                //采用异步
                async:true,
                //具体数据
                data:JSON.stringify(getJsonData()),
                //数据类型
                dataType: 'json',
                beforeSend:function () {
                    if($('#username').val()==''){
                        $('#errorMsg').text("用户名不能为空!");
                        return false;
                    }
                    if($('#password').val()==''){
                        $('#errorMsg').text("密码不能为空!");
                        return false;
                    }
                    if($('#authCode').val()==''){
                        $('#errorMsg').text("验证码不能为空!");
                        return false;
                    }
                },
                //数据提交到服务器成功后的回调函数
                success:function (data) {
                    var json = $.parseJSON(data);
                    var msg = json.message;
                    console.log(msg);
                    if(msg == 'codeError'){
                        //刷新验证码
                        $('#code').click();
                        console.log("验证码错误");
                        $('#errorMsg').text("验证码错误!");
                    }else if(msg == 'userError'){
                        //刷新验证码
                        $('#code').click();
                        console.log("用户名或密码错误");
                        $('#errorMsg').text("用户名或密码错误!");
                    }else if(msg == 'loginSuccess'){//登录成功
                        console.log("登录成功");
                        window.location = 'res/css/login.css';
                    }
                },
                //请求失败时被调用的函数
                error:function () {
                    alert('请求失败!请重新提交!');
                }
            });
        }

        //生成json格式的数据
        function getJsonData() {
            var json = {
                username:$('#username').val(),
                password:$.md5($('#password').val()),
                authCode:$('#authCode').val()
            };
            return json;
        }

        //跳转到注册页面
        function toRegister() {
            window.location = "/res/css/login.css";
        }

    </script>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="img_style">
            <img src="/res/images/logo_main.png" width="304" height="74"/>
        </div>
    </div>
    <!-- 主内容 -->
    <div class="main">
        <div class="content box">
            <!-- 左侧图片 -->
            <div class="main_left">
                <img src="/res/images/main_picture.png" width="700" height="443" />
            </div>
            <!-- 右侧登录表单 -->
            <div class="main_right">
                <section id="content">
                    <form action="">
                        <h1>欢迎登录</h1>
                        <div>
                            <input type="text" placeholder="Username" id="username" value="" required=""/>
                        </div>
                        <br/>
                        <div>
                            <input type="password" placeholder="Password" id="password" required=""/>
                        </div>
                        <br/>
                        <div>
                            <input class="required" placeholder="验证码" id="authCode" required=""/>
                            <img src="/normal/captcha" alt="验证码" id="code" onclick="this.src='/normal/captcha?d='+new Date().getTime()" />
                        </div>
                        <div style="color:red;" class="errorMsg">
                            <span style="font-size: 18px;" id="errorMsg"></span>
                        </div>
                        <br/>
                        <div>
                            <input type="button" class="btn" value="登录" onclick="ajaxPostData();"/>
                            <input type="button" class="btn" value="注册" onclick="toRegister()"/>
                            <!--<span id="h_size"><a href="#">注册</a></span>-->
                        </div>
                        <br/>
                    </form><!-- form -->
                </section><!-- content -->
            </div>
        </div>
    </div>
    <div class="h25"></div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="links">
            <a rel="nofollow" target="_blank" href="//www.jd.com/intro/about.aspx">
                关于我们
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/">
                联系我们
            </a>
            |
            <a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">
                人才招聘
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/joinin.aspx">
                商家入驻
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/intro/service.aspx">
                广告淘淘
            </a>
            |
            <a rel="nofollow" target="_blank" href="//app.jd.com/">
                手机淘淘
            </a>
            |
            <a target="_blank" href="#">
                友情链接
            </a>
            |
            <a target="_blank" href="//media.jd.com/">
                销售联盟
            </a>
            |
            <a href="//club.jd.com/" target="_blank">
                淘淘社区
            </a>
            |
            <a href="//gongyi.jd.com" target="_blank">
                淘淘公益
            </a>
        </div>
        <div class="copyright">
            Copyright&nbsp;&copy;&nbsp;2004-2017&nbsp;&nbsp;淘淘网&nbsp;版权所有
        </div>
    </div>
</body>
</html>